<template>
	<view class="page">

		<!-- 订单tab -->
		<view class="order-tab">
			<!-- <view class="tab" :class="{'action':OrderType==0}" @click="onOrderTab(0)">
				<text>全部</text>
				<text class="line"></text>
			</view> -->
			<view class="tab" :class="{'action':OrderType==el.id}" @click="onOrderTab(el.id)" v-for="(el,idx) in shopLists" :key="idx">
				<text>{{el.name}}</text>
				<text class="line"></text>
			</view>
		<!-- 	<view class="tab" :class="{'action':OrderType==2}" @click="onOrderTab(2)">
				<text>文玩</text>
				<text class="line"></text>
			</view>
			<view class="tab" :class="{'action':OrderType==3}" @click="onOrderTab(3)">
				<text>酒水</text>
				<text class="line"></text>
			</view> -->
		</view>
		<!-- 订单列表 -->
		<text style="font-size: 36rpx; font-weight: bold;">热销产品</text>

		<view class="production">
			<view class="production-container">
				<view class="production-item" v-for="(item, index) in list" :key="index" @click="onSkip(item)">
					<u--image :showLoading="true" radius="20rpx 20rpx 0 0" :src="item.img_list[0]" width="320rpx"
						height="350rpx"></u--image>
					<u--text margin="10rpx" :text="item.title" size="16"></u--text>
					<u--text margin="10rpx" :text="item.real_price" color="#9b742f" size="16"
						radius="30rpx">{{ item.real_price }}</u--text>
				</view>
			</view>

		</view>
		<TabBar :tabBarShow="2"></TabBar>
	</view>
</template>

<script>
	import TabBar from '../../components/TabBar/TabBar.vue';
	import {
		getYihuoList,
		getCategoryList
	} from '@/config/api.js';
	export default {
		components: {
			TabBar
		},
		data() {
			return {
				OrderType: '',
				shopLists: [],
				list: [],
				queryList: {
					page: 1,
					limit: 20,
					category_id: ''
				},
				swiperList: [{
						id: 0,
						name: '白玉',
						price: '￥5000',
						type: 'image',
						url: '/static/img/banner_01.png'
					},
					{
						id: 1,
						name: '血玉',
						price: '￥10000',
						type: 'image',
						url: '/static/img/banner_02.png'
					},
					{
						id: 2,
						name: '百题玉',
						price: '￥5000',
						type: 'image',
						url: '/static/img/banner_03.png'
					},
					{
						id: 3,
						name: '百题玉',
						price: '￥5000',
						type: 'image',
						url: '/static/img/banner_03.png'
					},
					{
						id: 3,
						name: '百题玉',
						price: '￥5000',
						type: 'image',
						url: '/static/img/banner_03.png'
					},
					{
						id: 4,
						name: '百题玉',
						price: '￥5000',
						type: 'image',
						url: '/static/img/banner_03.png'
					},
					{
						id: 5,
						name: '百题玉',
						price: '￥5000',
						type: 'image',
						url: '/static/img/banner_03.png'
					},
					{
						id: 6,
						name: '百题玉',
						price: '￥5000',
						type: 'image',
						url: '/static/img/banner_03.png'
					},

				],

			};
		},
		onLoad(params) {
			this.OrderType = params.type;
			
		},
		onShow(){
			getCategoryList(this.queryList).then(res => {
				this.shopLists = [{name: '全部',id: ''},...res.slice(0,5)];
				this.getGoodsInfo()
			});
			uni.setStorageSync('yihuogoods','')
		},
		methods: {
			getGoodsInfo(){
				getYihuoList().then(res => {
					this.list = res.data;
				})
			},
			/**
			 * 返回点击
			 */
			onBack() {
				uni.navigateBack();
			},
			/**
			 * 订单tab点击
			 */
			onOrderTab(type) {
				this.OrderType = type;
				this.queryList.category_id = type;
				// #ifdef H5
				uni.redirectTo({
					url: '/pages/MyOrderList/MyOrderList?type=' + type,
				})
				//#endif
			},
			/**
			 * 订单列表点击
			 */
			onOrderList() {
				uni.navigateTo({
					url: '/pages/OrderDetails/OrderDetails',
				})
			},
			/**
			 * 评价点击
			 */
			onEvaluate() {
				uni.navigateTo({
					url: '/pages/MyEvaluatePush/MyEvaluatePush'
				})
			},

			// 商品详情
			onSkip(data) {
				 uni.setStorageSync('yihuogoods',data)
				uni.navigateTo({
					url: '/moduleC/details/details',
					animationType: 'zoom-fade-out',
					animationDuration: 200
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	@import 'yiHuo.scss';
</style>